<template>
	<view class="container">
		<view class="logo text-center mt-20 mb-20">
			<image src="/static/logo.png" mode="aspectFit" style="width: 150rpx; height: 150rpx;"></image>
			<text class="block mt-20" style="font-size: 36rpx; font-weight: bold;">欢迎注册旅游助手</text>
		</view>
		
		<view class="card">
			<view class="input-item flex align-center mb-20">
				<text class="iconfont icon-user" style="font-size: 40rpx; margin-right: 20rpx; color: #4caf50;"></text>
				<input type="text" v-model="form.username" placeholder="请输入用户名" style="flex: 1;" />
			</view>
			<view class="input-item flex align-center mb-20">
				<text class="iconfont icon-phone" style="font-size: 40rpx; margin-right: 20rpx; color: #4caf50;"></text>
				<input type="text" v-model="form.phone" placeholder="请输入手机号" style="flex: 1;" />
			</view>
			<view class="input-item flex align-center mb-20">
				<text class="iconfont icon-lock" style="font-size: 40rpx; margin-right: 20rpx; color: #4caf50;"></text>
				<input type="password" v-model="form.password" placeholder="请输入密码" style="flex: 1;" />
			</view>
			<view class="input-item flex align-center mb-20">
				<text class="iconfont icon-lock" style="font-size: 40rpx; margin-right: 20rpx; color: #4caf50;"></text>
				<input type="password" v-model="form.confirmPassword" placeholder="请确认密码" style="flex: 1;" />
			</view>
			
			<view class="button" @click="register">注册</view>
			
			<view class="flex justify-between mt-20">
				<text @click="goToLogin">已有账号？立即登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					phone: '',
					password: '',
					confirmPassword: ''
				}
			}
		},
		methods: {
			register() {
				if (!this.form.username || !this.form.phone || !this.form.password) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
					return;
				}
				
				if (this.form.password !== this.form.confirmPassword) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
					return;
				}
				
				// 模拟注册
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				
				// 存储用户信息
				uni.setStorageSync('isLogin', true);
				uni.setStorageSync('userInfo', {
					id: 1,
					username: this.form.username,
					phone: this.form.phone,
					avatar: '/static/avatar.jpg'
				});
				
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}, 1000)
			},
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			}
		}
	}
</script>

<style>
	.input-item {
		border-bottom: 1rpx solid #eee;
		padding-bottom: 20rpx;
	}
</style>